<template>
<div>
    <Collapse value="0" accordion>
      <Panel :name="`${i}`"  v-for="(item, i) in curProperty[category]" :key="i">
         <Div :gutter="2" style="display:inline-flex;align-items: center">
          <span>{{curProperty[category][i][0]}}</span>
          <Button class="ivu-ml" size="small" @click="delOption(i)">-</Button>
        </Div>
        <Form class="content" :labelWidth="150" slot="content">
            <Alert style="margin: 12px 0 0">数据来源</Alert>
            <FieldItem v-model="curProperty[category][i][1].event" labelType="blackMargin"
                :config="{type: 'cascader', options: remoteCascaderData, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.event`)}" @change="changeRemoteCascader($event,i)"/>
            
            <FieldItem v-model="curProperty[category][i][1].model" labelType="blackMargin"
              :config="{type: 'cascader', options: compGroup.getModelTree()}"
              :formItemProps="{label: $t(`compDesign.jProperty.model`)}"
              @change="changeModel"
            />
            <FieldItem v-model="curProperty[category][i][1].notUseHier" labelType="blackMargin"
              :config="{type: 'check'}"
              :formItemProps="{label: '不使用Hier'}"
              @change="changeModel"
            />
            <FieldItem v-model="curProperty[category][i][1].notUseLink" labelType="blackMargin"
              :config="{type: 'check'}"
              :formItemProps="{label: '不显示有Link的节点'}"
              @change="changeModel"
            />
            
            <Alert style="margin: 12px 0 0">查询参数</Alert>
            <cfgEditTable :value="curProperty[category][i][1].params" :columns="paramsColumns" :showNum="false" />
            
            <Alert style="margin: 12px 0 0">options对照字段</Alert>
            <FieldItem v-model="curProperty[category][i][1].label" labelType="blackMargin"
              :config="{type: 'text'}" :formItemProps="{label: 'label'}" @change="setRemote(i)"/>
            <FieldItem v-model="curProperty[category][i][1].value" labelType="blackMargin"
              :config="{type: 'text'}" :formItemProps="{label: 'value'}" @change="setRemote(i)"/>
            <FieldItem v-model="curProperty[category][i][1].fieldPrefix" labelType="blackMargin"
              :config="{type: 'text'}" :formItemProps="{label: 'fieldPrefix'}" @change="setRemote(i)"/>

            <FieldItem v-model="curProperty[category][i][1].itemInValue" labelType="blackMargin"
              :config="{type: 'check'}" :formItemProps="{label: 'itemInValue'}" @change="setRemote(i)"/>
            <FieldItem v-show="curProperty[category][i][1].itemInValue"
                v-model="curProperty[category][i][1].fields" labelType="blackMargin"
              :config="{type: 'textarea', autosize: true}" :formItemProps="{label: 'fields'}" @change="setRemote(i)"/>
            <FieldItem v-show="curProperty[category][i][1].itemInValue"
                v-model="curProperty[category][i][1].displayToForm" labelType="blackMargin"
              :config="{type: 'check'}" :formItemProps="{label: 'displayToForm'}" @change="setRemote(i)"/>
        </Form>
        <!-- <starGrid :row="'30px 30px 30px'" :column="'100px auto'" :area="'a1 b1,a2 b2,a3 b3'" style="border:none;">
            <starLabel style="grid-area: a1">{{ $t(`compDesign.jProperty.event`) }}</starLabel>
            <Cascader style="grid-area: b1" v-model="curProperty[category][i][1].event" :data="remoteCascaderData" transfer
                @on-change="changeRemoteCascader($event,i)"></Cascader>
            <starLabel style="grid-area: a2">label</starLabel>
            <Input style="grid-area: b2" v-model="curProperty[category][i][1].label" @on-change="changeRemoteLabel(i)"></Input>
            <starLabel style="grid-area: a3">value</starLabel>
            <Input style="grid-area: b3" v-model="curProperty[category][i][1].value" @on-change="changeRemoteValue(i)"></Input>
        </starGrid> -->
      </Panel>
      <Panel name="newOption">
        <Div :gutter="2" style="display:inline-flex;align-items: center">
          <Input v-model="newOptionName"></Input>
          <Button class="ivu-ml" size="small" @click="addOption">+</Button>
        </Div>
      </Panel>
    </Collapse>
</div>
</template>

<script>
    import storeVar from '../../mixins/storeVar';
    export default {
        mixins: [storeVar],
        props: {
            category: {
                default: () => {
                    return 'remoteOptions';
                }
            }
        },
        data () {
            return {
                newOptionName: '',
                remoteCascaderData: [],
            }
        },
        mounted () {
            this.getRemoteCascader();
        },
        methods: {
            /**
             * 获取事件级联数据
             */
            getRemoteCascader () {
                this.compGroup.getEventCascader().then(res => {
                    this.remoteCascaderData = res;
                })
            },
            changeModel(model) {

            },
            changeRemoteCascader (data, index) {
                if (data.length === 0) {
                    return;
                }
                // let remoteOptions = this.curProperty.remoteOptions;
                // this.$api.Bsl.run({ category: data[0], name: data[1], param: {} }).then(res => {
                //     remoteOptions[index][1].remoteOptionBackData = res.data || [];
                //     let options = this.setRemoteOptions(remoteOptions[index][1].remoteOptionBackData, remoteOptions[index][1].label, remoteOptions[index][1].value)
                //     this.curProperty[this.category][index][1].options = options;
                //     this.syncGroup()
                //     this.compGroup.currentClassObject._setFieldOptionName();
                // })
            },
            setRemoteOptions (remoteOptionBackData, label, value) {
                let options = [];
                // 如果label字段、value字段不设置，则options为空
                if (label !== undefined && label !== '' && value !== undefined && value !== '') {
                    options = remoteOptionBackData.map(d => {
                        return { label: this.lodash.get(d, label) || '', value: this.lodash.get(d, value) || '' }
                    })
                }
                return options;
            },
            setRemote (index) {
                let remoteOptions = this.curProperty.remoteOptions;
                let options = this.setRemoteOptions(
                    remoteOptions[index][1].remoteOptionBackData, remoteOptions[index][1].label, remoteOptions[index][1].value
                )
                this.curProperty[this.category][index][1].options = options;
                this.syncGroup()
                this.compGroup.currentClassObject._setFieldOptionName();
            },
            addOption (i) {
                if (!!this.newOptionName && this.newOptionName !== '') {
                    this.curProperty[this.category].push([
                        this.newOptionName,
                        { event: [], model: [], label: '', value: '', options: [], remoteOptionBackData: [], params: [] }
                    ])
                    this.syncGroup()
                    this.compGroup.currentClassObject._setFieldOptionName();
                }
            },
            delOption (i) {
                this.curProperty[this.category].splice(i, 1)
                this.syncGroup();
                this.compGroup.currentClassObject._setFieldOptionName();
            }

        },
        computed: {
            paramsColumns() {
                return [
                    {
                        key: 'name',
                        title: this.$t(`compDesign.jProperty.name`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'text', clearable: true } }
                    },
                    {
                        key: 'path',
                        title: this.$t(`compDesign.jProperty.varPath`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'text', clearable: true } }
                    },
                    {
                        key: 'isHier',
                        title: 'hierQuery',
                        elementName: 'fieldCell',
                        props: { config: { type: 'check' } }
                    },
                    { slot: 'operation', }
                ]
            },
        }
    }
</script>
<style scoped lang='scss'>

</style>
